<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title>测试</title>
</head>
<style type="text/css">
#demo {
	background-color: skyblue;
	width: 400px;
	height: 50px;
	overflow: hidden;
}

#panel {
	/*float: left;*/
	width: 1000000px;
}

#panel div {
	float: left;
}

#demo ul li{
	list-style: none;
	float: left;
	margin: 0 30px;
}
</style>
<body>
<div id="demo">
	<div id="panel">
		<!-- <div>
			<ul id="lists">
				<li>站长素材获得一等奖</li>
				<li>站长素材获得二等奖</li>
				<li>站长素材获得三等奖</li>
				<li>站长素材获得四等奖</li>
			</ul>
		</div> -->
		<span id="spanarea">这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！这是一条跑马灯！！！</span>
	</div>
</div>

<button onclick="getScrollLeft()">点击获取scrollLeft</button>

<script type="text/javascript">
	let panel = document.getElementById('panel')
	let lists = document.getElementById('lists')
	let demo = document.getElementById('demo')
	let spanarea = document.getElementById('spanarea')
	console.log(demo.scrollLeft)
	console.log(spanarea.offsetWidth)
	// console.log(lists.width())

	function Marquee() {
	// console.log(demo.scrollLeft)
	// console.log(spanarea.offsetWidth)
		if (demo.scrollLeft - spanarea.offsetWidth >= 0) {
			demo.scrollLeft = 0
		} else {
			demo.scrollLeft += 1
		}
	}

	setInterval(Marquee, 10)


	function getScrollLeft() {
		console.log(demo.scrollLeft)
	}
</script>

</body>
</html>